import React, { useState, useEffect } from 'react'
// import ReactDom from 'react-dom'
// import ReactDOM from 'react-dom/client'
import { withRouter } from 'react-router-dom'
import { Button } from 'antd'
import { getUsersApi } from '@/api'
import root from '@/index.js'
import useWatch from "@/hooks/useWatch"

// 类式组件
// export default class request extends React.Component {
//     getUserInfo() {
//         getUsersApi().then(res => {
//             console.log('发生请求了')
//             console.log(res)
//         })
//     }

//     render() {
//         return (
//             <div>
//                 <div>这是request 页面</div>
//                 <br />
//                 <br />
//                 <Button onClick={this.getUserInfo}>发送请求</Button>
//             </div>
//         )
//     }
// }

// 函数式组件
const Request = (props) => {
    const getUserInfo = () => {
        getUsersApi().then(res => {
            console.log('发生请求了')
            console.log(res)
        })
    }

    // 使用hooks
    let [name, setName] = useState('孙悟空')

    let [nameNew, setNameNew] = useState({ name: '张三丰', age: 180, address: '武当山' })

    // 自定义hooks
    useWatch(name, (newName, oldName) => {
        console.log('oldName', oldName)
        console.log('newName', newName)
    })

    const changeName = () => {
        setName(() => '似水流年')
        setNameNew(() => ({ name: 'wxy', age: 30, address: '黄冈' }))
    }
    const handleLink = () => {
        props.history.push('/my')
    }

    const oumounted = () => {
        root.unmount()
    }

    useEffect(() => {
        console.log('函数式组件生命周期...')
        return () => {
            console.log('相当于卸载组件的钩子...')
        }
    }, [])

    return (
        <div style={{ margin: '30px' }}>
            <div id="box">这是request 页面</div>
            <div>点击改名-字符串：{name}</div>
            <div>点击改名-对象：：{nameNew.name},我的年龄：{nameNew.age} 我的地址：{nameNew.address}</div>
            <br />
            <Button onClick={getUserInfo}>发送请求</Button>
            <br />
            <br />
            <Button onClick={changeName}>点击改名</Button>
            <br />
            <br />
            <Button onClick={oumounted}>卸载组件</Button>
            <br />
            <br />
            <Button onClick={handleLink}>路由跳转</Button>
        </div>
    )
}

export default withRouter(Request)